<!DOCTYPE html>
<html>

<head>
	<title>Second-Hand Store Login</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>
	<header>
		<h2>UIC Second-Hand Store</h2>
	</header>
	<main>
		<div class="content narrowbox">
			<h2>Login</h2>
			<hr>
			<form action="login.php" method="POST" class="logNregForm">
				<label for="usr">Username:</label>
				<input type="email" id="usr" name="usr" placeholder="Enter your UIC email" required>
				<!-- user enters a UIC email address as the username-->
				<label for="pwd">Password:</label>
				<input type="password" id="pwd" name="pwd" placeholder="Enter your password" required>
				<!-- the user choose to be buyer or seller -->
				<label for="role">Role:</label>
				<select id="role" name="role" onchange="changeInput()">
					<option value="buyer">Buyer</option>
					<option value="seller">Seller</option>
					<option value="admin">Admin</option>
				</select>
				<button type="submit">Login</button>
				<p>Don't have an account? Go to <a href="RegisterPage.html">Register</a></p>
			</form>
		</div>
	</main>
	<script>
		function changeInput() {
			//get selection
			let sel = document.getElementById("role");
			let index = sel.selectedIndex;
			let role = sel.options[index].value;

			//change input type and display
			let usernameInput = document.getElementById("usr");
			if (role == "admin") {
				usernameInput.type = "text";
				usernameInput.placeholder = "Enter admin username";
			} else {
				usernameInput.type = "email";
				usernameInput.placeholder = "Enter your UIC email";
			}
		}

		//check when refresh
		changeInput();
	</script>
</body>

</html>